import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Error from '../views/error_page/404.vue'

/**
 * Vue.use函数执行，要在Vue实例化即new Vue(options)之前
 * use 函数做了以下步骤：
 * 1. 检查插件是否已经注册，相同的插件只注册一次
 * 2. 将Vue构造函数作为第一个参数，作为插件注册调用
 * 3. 根据插件形式选择调用plugin.install还是plugin
 * 4. 存储已注册插件，用于插件是否已注册检验
 *
 * 如果Vue.use在new Vue()之后执行，this._init()时
 * 你使用的插件的内容还没有添加到Vue.options.components、Vue.options.directives、Vue.options.filters等属性中。
 * 所以新初始化的Vue实例中也就没有插件内容
 */
Vue.use(VueRouter)

/**
 * 一组路由，把上面的每一条路由组合起来，形成一个数组
 * @type {*[]}
 */
const routes = [
    {
        /**
         * 这里的path:'*'就是输入地址不匹配时，自动显示出Error.vue的文件内容
         */
        path: '*',
        component: Error
    },
    {
        /**
         * mode为history模式下，"/"的访问路径是：http://localhost:8080/
         */
        path: '/',
        name: 'Home',
        /**
         * 通过Import导入的vue组件
         * Home就是vue的组件
         */
        component: Home
    },
    {
        /**
         * mode为history模式下，"/"的访问路径是：http://localhost:8080/about
         */
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        /**
         * vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载
         * @returns {Promise<*>|*}
         */
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/env-params',
        name: 'EnvParams',
        component: () => import('../views/env_params/EnvParams.vue')
    },
    {
        /**
         * 展现url传递参数
         */
        path:'/params/:newsId/:newsTitle',
        component: () => import('../views/params_match_routing/ParamsMatchRouting.vue')
    },
    {
        /**
         * 演示数据绑定
         */
        path:'/data-binding',
        component: () => import('../views/data_binding/DataBinding.vue')
    },
    {
        /**
         * 演示指令
         */
        path:'/directives',
        component: () => import('../views/directives/Directives.vue')
    },
    {
        /**
         * 演示生命周期
         */
        path:'/lifecycle',
        component: () => import('../views/lifecycle/Lifecycle.vue')
    },
    {
        /**
         * 演示计算属性
         */
        path:'/computed-attribute',
        component: () => import('../views/computed_attribute/ComputedAttribute.vue')
    },
    {
        /**
         * 演示计算属性
         */
        path:'/style-bind',
        component: () => import('../views/style_bind/StyleBind.vue')
    },
    {
        /**
         * 演示数组更新
         */
        path:'/array-update',
        component: () => import('../views/array_update/ArrayUpdate.vue')
    },
    {
        /**
         * 演示事件
         */
        path:'/event',
        component: () => import('../views/event/Event.vue')
    },
    {
        /**
         * 演示v-model
         */
        path:'/v-model',
        component: () => import('../views/v_model/VModel.vue')
    },
    {
        /**
         * 演示组件
         */
        path:'/my-component',
        component: () => import('../views/component/main.vue')
    },
    {
        /**
         * 演示异步加载组件
         */
        path:'/async-component',
        component: () => import('../views/component_async/main.vue')
    },
    {
        /**
         * 演示Bus消息总线
         */
        path:'/bus',
        component: () => import('../views/bus/BusDemo.vue')
    },
    {
        /**
         * 演示父子链引用设置消息
         */
        path:'/ref-event',
        component: () => import('../views/event_ref/Parent.vue')
    },
    {
        /**
         * 演示slot
         */
        path:'/slot',
        component: () => import('../views/slot/Parent.vue')
    },
    {
        /**
         * 演示render
         */
        path:'/render',
        component: () => import('../views/render/Render.vue')
    },
    {
        /**
         * 演示 render-component
         */
        path:'/render-component',
        component: () => import('../views/render/RenderComponent.vue')
    },
    {
        /**
         * 演示 vuex
         */
        path:'/vuex',
        component: () => import('../views/vuex/VuexDemo.vue')
    },
    {
        /**
         * 演示 axios
         */
        path:'/axios',
        component: () => import('../views/axios/AxiosDemo.vue')
    },
    {
        /**
         * 演示 mockjs
         */
        path:'/mockjs',
        component: () => import('../views/mockjs/Mockjs.vue')
    },

    {
        /**
         * 演示 await axios
         */
        path:'/axios-await',
        component: () => import('../views/axios/AwaitAxiosDemo.vue')
    },
    {
        /**
         * mode为history模式下，"/"的访问路径是：http://localhost:8080/
         */
        path: '/two-step-routing',
        name: 'TwoStepRouting',
        /**
         * 通过Import导入的vue组件
         * Home就是vue的组件
         */
        component: () => import('../views/two_step_routing/Parent.vue'),
        children: [
            {
                /**
                 * 以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;
                 * 在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
                 * 在history模式下，务必将vue.config.js中的publicPath的值设置成绝对路径模式，否则嵌套路由将无法工作
                 */
                path: 'child',
                name: 'Child',
                component: () => import('../views/two_step_routing/Child.vue')
            }
        ]
    },
]

const router = new VueRouter({
    /**
     * url中不会带#号
     */
    mode: 'history',
    /**
     * process.env.BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
     * 例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”
     */
    base: process.env.BASE_URL,
    /**
     * 将路由配置数组注册
     */
    routes
})

export default router
